<template>
<div class="mainContent">
  <pathTracking :path="Model.path" />
  <div class="container">
    <!-- 一级tabs -->
    <el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
      <el-tab-pane label="结算单详情" name="1"></el-tab-pane>
      <el-tab-pane label="操作记录" name="2"></el-tab-pane>
    </el-tabs>
    <div class="tabBox">
      <el-row class="detailTable">
        <div class="detailTableItemTitle">
          <span class="detailTableImgSmall"></span>
          <p class="text">结算单详情基础信息</p>
        </div>
        <advancedSearch :option="Model.filterOption" @getChild="getFilterData"></advancedSearch>
      </el-row>
      <div v-show="Model.activeTab==1">
        <el-row class="detailTable">
          <div class="detailTableItemTitle">
            <span class="detailTableImgSmall"></span>
            <p class="text">发货商品明细</p>
          </div>
          <div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
            <el-table :data="Model.tableData" border style="width: 100%;">
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="barcode" label="成品条码" width="120"></el-table-column>
              <el-table-column prop="category" label="品类" width="120"></el-table-column>
              <el-table-column prop="theStyleName" label="款式名称" width="150"></el-table-column>
              <el-table-column prop="goods" label="商品编码" width="120"></el-table-column>
              <el-table-column prop="description" width="150">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                    <span class="iconQuestionmark">描述</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="mainQuantity" label="数量" width="120"></el-table-column>
              <el-table-column prop="machiningTypeName" label="加工类型" width="120"></el-table-column>
              <el-table-column prop="goldIsFee" label="金料费" width="120"></el-table-column>
              <el-table-column prop="deputyStoneCostOne" label="副石费1" width="120"></el-table-column>
              <el-table-column prop="twoDeputyStoneFee" label="副石费2" width="120"></el-table-column>
              <el-table-column prop="operatingCosts" label="工费" width="120"></el-table-column>
              <el-table-column prop="riskFee" label="风险费" width="120"></el-table-column>
              <el-table-column prop="sprayWaxFee" label="喷蜡费" width="120"></el-table-column>
            </el-table>
          </div>
        </el-row>
      </div>
      <div v-show="Model.activeTab==2">
        <el-row class="detailTable">
          <div class="detailTableItemTitle">
            <span class="detailTableImgSmall"></span>
            <p class="text">订单操作日志</p>
            <img
                class="detailTableImgNormal"
                :src="Model.tab2TableDetail1.src"
                alt
                @click="toggleTableDetail('tab2TableDetail1')"
              >
            </div>
            <div class="detailTableDetail" v-show="Model.tab2TableDetail1.flag">
              <el-table :data="Model.whWarehouseLogList" border show-summary style="width: 100%;" @selection-change="onTableSelectionChange">
                <el-table-column prop="createTime" label="时间" width="200"></el-table-column>
                <el-table-column prop="type" label="操作类型" width="120"></el-table-column>
                <el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
                <el-table-column prop="record" label="操作记录"></el-table-column>
              </el-table>
            </div>
        </el-row>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import advancedSearch from "@/components/common/filter/advancedSearch";
import {
  getDateString
} from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
  name: "purchase",
  mixins: [Model, Controller],
  components: {
    advancedSearch,
    pagination,
    pathTracking
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
@import "./index.less";
</style>
